<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>出差申请单填写</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/my/apply.css" />
    <link rel="stylesheet" href="../../../css/trip/apply/date.css">
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css" />
    <style>
        .forminput {
            text-align: right;
            padding-right: .8rem !important;
            display : inline-block;
            position : relative;
        }
        .img-div {
            padding: 0.3rem;
            /*width: 3rem;*/
            /*height: 3rem;*/
        }
        .img_div{
            display : inline-block;
            position : relative;
        }
        .img_div .delete{
            position : absolute;
            top : -5px;
            right : -5px;
            color: red;
            text-align: center;
            cursor: pointer;
            border-radius: 20px;
            width : 20px;
            height : 20px;
            line-height: 20px;
            background:#DDDDDD;
        }
    </style>
</head>

<body style="cursor: pointer">

    <div class="aui-content main_content" style="top:0;">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item" style="border-bottom: 1px solid #F7F7F7;">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        申请人
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" value="" id="book_user" class="forminput" readonly="readonly">
                    </div>
                </div>
            </li>
            <li class="aui-list-item" style="border-bottom: 1px solid #F7F7F7;">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        出差始发地
                    </div>
                    <div class="aui-list-item-input forminput" id="selectCity">
                        <input type="text" value="" id="travel_site" readonly="readonly" class="forminput" placeholder="请输入出差始发地">
                    </div>
                </div>
            </li>
            <li class="aui-list-item" style="border-bottom: 1px solid #F7F7F7;">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        出差目的地
                    </div>
                    <div class="aui-list-item-input" id="selectCityMany">
                        <input type="text" value="" id="travel_destination" readonly="readonly" class="forminput" placeholder="请输入出差目的地">
                    </div>
                </div>
            </li>
            <li class="aui-list-item" style="border-bottom: 1px solid #F7F7F7;">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-label" style="width: 40%;">
                        出差开始时间
                    </div>
                    <div class="select_date date-time">
                        <input type="text" placeholder="yyyy-MM-dd" value="" id="my-startDate" readonly="readonly" class="forminput" style="color:#56B9DB;">
                    </div>
                </div>
            </li>
            <li class="aui-list-item" style="border-bottom: 1px solid #F7F7F7;">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-label" style="width: 40%;">
                        出差结束时间
                    </div>
                    <div class="select_date date-time">
                        <input type="text" placeholder="yyyy-MM-dd" value="" id="my-endDate" readonly="readonly" class="forminput" style="color:#56B9DB;">
                    </div>
                </div>
            </li>
            <li class="aui-list-item" style="border-bottom: 1px solid #F7F7F7;">
                <div class="aui-list-item-inner aui-list-item-arrow" id="picker1">
                    <div class="aui-list-item-title">选择出行人</div>
                </div>
            </li>
            <li class="aui-list-item" style="border-bottom: 1px solid #F7F7F7;">
                <div class="" id="travel_person">
                </div>
            </li>
            <li class="aui-list-item" style="border-bottom: 1px solid #F7F7F7;">
                <div class="aui-list-item-inner">
                    <div class="" style="width: 100%;">
                        <span class="pay_detail">出差原因</span>
                        <br>
                        <div style="width:100%; ">
                            <textarea id="travel_reason" style="width:100%;border: none; " placeholder="请输入出差原因" style="color:#ccc;"></textarea>
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item" style="border-bottom: 1px solid #F7F7F7;">
                <div class="aui-list-item-inner aui-list-item-arrow" id="picker2">
                    <div class="aui-list-item-title">审批人</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div id="approve_person">
                </div>
            </li>
            <li class="aui-list-item" style="padding: 1rem;">
                <div>
                    <h2 class="pay_detail">图片</h2>
                    <div class="img-div-add">
                        <div class="aui-iconfont aui-icon-plus" style="background: #F6F6F6;padding: 1rem;width: 3rem;height: 3rem;display: inline-block;text-align: center;"></div>
                        <input type="file" accept="image/*" class="upload_img inputstyle" style="width: 10rem;height: 6rem;cursor: pointer;font-size: 30px;outline: medium none;position: absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0; left:0px;top: 0px;">
                    </div>
                </div>
            </li>

        </ul>
        <div style="margin-top: 1.5rem;padding: 0rem 1rem;">
            <div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm" style="width: 45%;float: left;background-color:#3CB0D6;" id="submitApply">立即提交</div>
            <div class="aui-btn aui-btn-primary aui-btn-block aui-btn-outlined aui-btn-sm" style="width: 45%;float: right;background: #fff!important;border: 0rem!important;" id="reset">重置</div>
        </div>
        <div style="height: 5rem;">&nbsp;</div>
    </div>

</body>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-toast.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/extend/doT.min.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript" src="../../../script/extend/picker.min.js"></script>
<script type="text/javascript" src="../../../script/extend/date.js"></script>
<script type="text/javascript" src="../../../service/index/apply/applyAdd.js"></script>
<!-- 图片模板 -->
<script id="img_tpl" type="text/x-dot-template">
    <div class='img-div aui-col-xs-4'>
        <div class="img_div">
            <img src="{{= it }}" style="max-width: 100%;max-height: 100%;margin: 0 auto;vertical-align: middle;"/>
            <div class="delete">x</div>
        </div>
    </div>
</script>
<script id="person_tpl" type="text/x-dot-template">
    <div class="u_div" data-val="{{= it.val }}">
        <span class="u_name">{{= it.text }}</span>
        <i class="iconfont icon-shanchu" style="color:red;"></i>
    </div>
</script>
<script id="person_tpl2" type="text/x-dot-template">
    <div class="u_div" data-val="{{= it.val }}">
        <span class="u_name">{{= it.text }}</span>
        <i class="iconfont icon-shanchu del_approve_person" style="color:red;"></i>
    </div>
</script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        new applyAdd();
    }
</script>
</html>
